<template>
  <div class="geo-location">
    <input
      type="search"
      v-model="search"
      name=""
      id="city"
      placeholder="请输入城市的名称(中文或拼音)"
      @change="getData()"
    />
  </div>
</template>
<script>
import axios from "axios";
import { KEY, API_LOCATION } from "@/common/constrants";
import { mapActions } from 'vuex';
export default {
  data() {
    return {
      search: "",
    };
  },

  methods: {
    ...mapActions([
      "updateLocationAction"
    ]),
    getData() {
      axios
        .get(API_LOCATION, {
          params: {
            key: KEY,
            location: this.search,
          },
        })
        .then((res) => {
          console.log(res);
          this.updateLocationAction(res.data.location[0]);
        });
    },
  },
};
</script>

<style scoped>
#city {
  display: inline-block;
  width: 20rem;
}
</style>